<template>
    <div class="client">
        <el-form
            ref="formRef"
            :model="formData"
            :rules="rules"
            label-width="100px"
            :size="'default'"
            status-icon
        >
            
            <el-form-item label="出租费率" prop="day_rate">
                <el-input-number v-model.trim="formData.day_rate" :min="0" />
            </el-form-item>
            <el-form-item label="出租费货币" prop="currency_cod">
                <el-select
                    v-model="formData.currency_cod"
                    :clearable="true"
                    filterable
                    placeholder="Select"
                >
                    <el-option
                        v-for="optValue in currency"
                        :key="optValue.value"
                        :label="optValue.label"
                        :value="optValue.value"
                    />
                </el-select>
            </el-form-item>
        </el-form>
    </div>
    <div class="btn-group">
        <el-button-group>
            <NormalBtn @click="onSave" :text="'保存'"></NormalBtn>
        </el-button-group>
    </div>
</template>
<script setup lang="ts">
import { FeeRateModel } from '@/common/types/business';
import { useAppStore } from '@/store/app';
import { FormRules } from 'element-plus';
import { storeToRefs } from 'pinia';
import { ref, reactive } from 'vue';
const formData = reactive<FeeRateModel>({
});
const emit = defineEmits<{
    updateRate: [r: FeeRateModel];
}>()
const formRef = ref();
const rules = reactive<FormRules>({
    
    day_rate: [{ required: true, message: '请输入出租费率', trigger: 'blur' }],
    currency_cod: [{ required: true, message: '请选择货币', trigger: 'blur' }],
});
const { currency } = storeToRefs(useAppStore());
const onSave = () => {
    formRef.value.validate((valid: any) => {
        if (valid) {
            emit('updateRate', formData);
        }
    });
};
</script>
<style lang="scss" scoped>
.client {
    margin-bottom: 20px;
    padding: 10px 10px;
    border: solid 2px var(--el-color-primary);
    box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.5);
}
.bank {
    margin-bottom: 20px;
    padding-top: 10px 10px;
    border: solid 2px var(--el-color-primary);
    box-shadow: 10px 10px 5px rgba(100, 100, 100, 0.5);
}
.btn-group {
    .btn {
        margin-right: 5px;
    }
}
</style>
